<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="show"
      :close-on-click-modal="false"
      v-bind="$props"
    >
      <div style="margin:-30px 0 0;float:right">
        <el-button type="primary" plain @click="getAreaPrincipalInfoList">
          添加负责人
        </el-button>
      </div>
      <!-- <div class="head-list">
      <div v-for="(item, index) in combineList" class="item" :index="index" @mouseenter="item.isEdit = true" @mouseleave="item.isEdit = false">
        <el-card :body-style="{ padding: '0px' }">
          <el-image
            style="width: 100px; height: 100px"
            src="https://picsum.photos/510/300?random"
          />
          <transition name="el-fade-in-linear">
            <div v-show="item.isEdit" class="badge" @click="deleteEvent(item, index)">
              <i class="el-icon-close" />
            </div>
          </transition>
          <div class="name">
            <span>{{ item.name }}</span>
          </div>
        </el-card>
      </div>
    </div> -->
      <el-table
        :data="dataAreaPrincipalInfoList"
        v-loading="dataRequestLoading"
        element-loading-text="正在加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        class="table"
        highlight-current-row
        :height="tableHeight"
        :max-height="tableHeight"
      >
        <el-table-column
          prop="avatar"
          label="头像"
        >
          <template slot-scope="{ row }">
            <el-image
              v-if="row.avatar !== ''"
              style="width: 60px; height: 60px"
              :src="url + row.avatar"
              :preview-src-list="[url + row.avatar]"
            />
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="管理员名称"
        />
        <el-table-column
          prop="username"
          label="管理员帐号"
        />
        <el-table-column
          prop="status"
          label="管理员状态"
        >
          <template slot-scope="{ row }">
            <el-tag
              :type="row.status ? 'success': 'danger'"
              effect="dark"
            >
              {{ row.status ? '启动': '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="permission_role_name"
          label="权限角色名称"
        />
        <el-table-column
          prop="telephone"
          label="联系电话"
        />
        <el-table-column
          prop="email"
          label="电子邮箱"
        />
        <el-table-column
          prop="remark"
          label="备注"
        />
        <el-table-column
          prop="login_time"
          label="最后登陆时间"
        />
        <el-table-column fixed="right" label="操作" width="100px">
          <template slot-scope="{ row }">
            <el-button type="danger" @click="removeAreaAdmin(row)">移除</el-button>
          <!-- <el-button>删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        width="900px"
        title="添加区域负责人"
        :visible.sync="innerVisible"
        append-to-body
      >
        <!-- <div style="margin:-30px 10px  10px;float:right">
          <el-button type="primary" plain>
            添 加
          </el-button>
        </div> -->
        <el-table
          :data="data_area_principal_info_list.data"
          v-loading="dialogDataRequestLoading"
          element-loading-text="正在加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.5)"
          class="table"
          highlight-current-row
          :height="tableHeight"
          :max-height="tableHeight"
          @selection-change="getSelection"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            prop="avatar"
            label="头像"
          >
            <template slot-scope="{ row }">
              <el-image
                v-if="row.avatar !== ''"
                style="width: 60px; height: 60px"
                :src="url + row.avatar"
                :preview-src-list="[url + row.avatar]"
              />
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="管理员名称"
          />
          <el-table-column
            prop="username"
            label="管理员帐号"
          />
          <el-table-column
            prop="status"
            label="管理员状态"
          >
            <template slot-scope="{ row }">
              <el-tag
                :type="row.status ? 'success': 'danger'"
                effect="dark"
              >
                {{ row.status ? '启动': '停用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="permission_role_name"
            label="权限角色名称"
          />
          <el-table-column
            prop="telephone"
            label="联系电话"
          />
          <el-table-column
            prop="email"
            label="电子邮箱"
          />
          <el-table-column
            prop="remark"
            label="备注"
          />
          <el-table-column
            prop="login_time"
            label="最后登陆时间"
          />
          <!-- <el-table-column label="操作">
            <template slot-scope="{ row, $index }">
              <el-button type="primary" @click="editEvent(row, $index)">编辑</el-button>
              <el-button>删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="handleClose">{{ cancelText }}</el-button> -->
          <el-button :disabled="addDisabled" type="primary" @click="changeAdminArea">添 加</el-button>
        </span>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{ cancelText }}</el-button>
        <el-button type="primary">{{ confirmText }}</el-button>
      </span>
    </el-dialog>
    <el-dialog />
  </div>
</template>

<script>
import { getAreaPrincipalInfoList, changeAdminArea, removeAreaAdmin } from '@/api/region.js'
import { showMixin } from '@/mixins/show'
import { Dialog } from 'element-ui'
import elDragDialog from '@/directive/el-drag-dialog'
// import { stringify } from '../../../utils/storage'

export default {
  directives: { elDragDialog },
  mixins: [showMixin],
  props: {
    ...Dialog.props,
    dataAreaPrincipalInfoList: {
      type: Array,
      default: () => []
    },
    list: {
      type: Array,
      default: () => [{ isEdit: false }, { isEdit: false }]
    },
    areaId: {
      type: Number,
      default: () => ''
    },
    // 确定文本
    confirmText: {
      type: String,
      default: '保存'
    },
    // 取消文本
    cancelText: {
      type: String,
      default: '取消'
    }
  },
  data() {
    return {
      // table高度自适应
      tableHeight: window.innerHeight - 264,

      // loading
      dataRequestLoading: false,
      dialogDataRequestLoading: false,

      addDisabled: true,
      innerVisible: false,
      url: process.env.VUE_APP_BASE_API,
      currentList: [],
      params: {
        keywords: ''
      },
      // 初始状态下
      defaultParams: {},
      // 临时
      tempList: [],
      // 管理员状态栏显示
      status: {
        0: { color: 'danger', label: '停用中' },
        1: { color: 'success', label: '启用' }
      },
      // 请求区域负责人参数
      get_area_principal_info_list: {
        sort_name: '',
        sort: 'desc',
        area_id: ''
      },
      // 返回区域负责人参数
      data_area_principal_info_list: {
        data: []
      }
    }
  },
  computed: {
    combineList() {
      return Object.assign([], this.tempList, this.currentList)
    }
  },
  watch: {
    list(value) {
      this.currentList = value
    }
  },
  mounted() {
    this.defaultParams = Object.assign({}, this.params)
  },
  methods: {
    getAreaPrincipalInfoList() {
      this.dataRequestLoading = true
      this.dialogDataRequestLoading = true
      this.innerVisible = true
      getAreaPrincipalInfoList(this.get_area_principal_info_list).then(res => {
        this.data_area_principal_info_list.data = res.result.showing
        this.dataRequestLoading = false
        this.dialogDataRequestLoading = false
      })
    },
    changeEvent(value) {
      const result = this.combineList.some(v => {
        return value === v.name
      })
      if (!result) {
        this.tempList.push({
          name: value,
          isEdit: false
        })
      } else {
        this.$message({
          type: 'info',
          message: '检测到该用户已存在在负责人列表内'
        })
      }
    },
    // 批量选择负责人绑定区域
    changeAdminArea() {
      this.$confirm('此操作将添加负责人到该区域，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'primary'
      }).then(() => {
        const admin_user_id = []
        this.selection.forEach(val => {
          console.log(val)
          admin_user_id.push(val.admin_user_id)
        })
        changeAdminArea({ admin_user_id: admin_user_id, area_id: this.areaId }).then(res => {
          this.$emit('getAreaPrincipalInfoList')// this.getAreaPrincipalInfoList()
          this.innerVisible = false
          this.$notify({
            title: '成功',
            message: '添加区域负责人成功！',
            type: 'success'
          })
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消操作' })
      })
    },
    // 获取选择项
    getSelection(selection) {
      if (selection.length === 0) {
        this.addDisabled = true
      } else {
        this.addDisabled = false
      }
      this.selection = selection
    },
    // 移除区域负责人
    removeAreaAdmin(row) {
      this.$confirm('此操作将移除该区域负责人到空闲负责人，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        removeAreaAdmin({ admin_user_id: row.admin_user_id }).then(res => {
          this.$emit('getAreaPrincipalInfoList')
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    /**
         * 删除负责人
         * @param row 行内容
         * @param rowIndex 下表
         */
    deleteEvent(row, rowIndex) {
      if (!row.id) {
        this.tempList.splice(rowIndex, 1)
      } else {
        // 调用接口删除
        this.currentList.splice(rowIndex, 1)
      }
    },
    /**
         * 确认提交
         * 派发 tempList ：添加的文件
         */
    confirmEvent() {
      if (this.tempList.length > 0) {
        this.$emit('confirm', this.tempList)
      }
      this.handleClose()
    },

    // 取消事件
    handleClose() {
      this.show = false
      this.params = this.defaultParams
    }
  }
}
</script>

<style scoped lang="scss">
.head-list{
  margin-top: 16px;
  .item{
    position: relative;
    width: 100px;
    overflow: inherit;
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    .img{
      width: 100px;
      height: 100px;
    }
    .badge{
      position: absolute;
      top: 0;
      right: 11px;
      transform: translateY(-50%) translateX(100%);
      background-color: #f56c6c;
      border-radius: 10px;
      color: #fff;
      display: inline-block;
      font-size: 12px;
      height: 18px;
      line-height: 18px;
      padding: 0 3px;
      text-align: center;
      white-space: nowrap;
    }
    .name {
      text-align: center;
      padding: 5px;
    }
  }
}
</style>
